<template>
  <div>
    <el-col>
      <p style="font-size: 30px">器物图谱</p>
      <el-form :inline="true">
        <el-form-item label="地图名(必填)">
          <el-input v-model="mapName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button plain @click="search">查询</el-button>
        </el-form-item>
      </el-form>

    </el-col>
    <el-col>
      <el-card v-for="i in iList" :key="i.id" style="margin-top: 10px;background-color: #254040" shadow="hover">
        <el-row>
          <el-col :span="5">
            <el-image :src="i.image_path" style="margin: 0 auto"></el-image>
          </el-col>
          <el-col :span="11">
            <p style="color: #d241d2">{{i.name}}</p>
            <p style="color: #f3f31f">{{i.tip.replace('\\n','').replace('\\\n','')}}</p>
            <p style="color: #ffffff">来源: {{i.source}}</p>
            <p style="color: #ffffff">等级限制: {{i.level_limit}}</p>
            <p style="color: #ffffff">品质等级: {{i.view_score}}</p>
          </el-col>
          <el-col :span="8">
            <p style="color: #00af00">风水提高<span style="color: #00af00">{{i.geomantic_score}}</span></p>
            <p style="color: #00af00">坚固提高<span style="color: #00af00">{{i.hard_score}}</span></p>
            <p style="color: #00af00">趣味提高<span style="color: #00af00">{{i.interesting_score}}</span></p>
            <p style="color: #00af00">实用提高<span style="color: #00af00">{{i.practical_score}}</span></p>
            <p style="color: #00af00">观赏提高<span style="color: #00af00">{{i.view_score}}</span></p>
          </el-col>
        </el-row>

      </el-card>

    </el-col>
  </div>
</template>

<script>
import {j3api} from "@/axios/j3http";

export default {
  name: "ImplementsPage",
  data() {
    return {
      mapName: '七秀',
      iList: []
    }
  },
  methods: {
    search() {
      j3api.searchImplements(this.mapName).then(res => {
        // console.log(res);
        this.iList = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
